<template>
  <div class="product-wrapper">
    <ul class="product-list">
      <li class="product-item"
          border-bottom-1px
          v-for="(item, index) of list"
          :key="item.goods_id"
          @click="handleDetail(item.goods_id)">
        <div class="product-item-left">
          <div class="img-wrap"
               w-190-190
               aspectratio>
            <img :src="item.cover_image"
                 alt=""
                 aspectratio-content>
          </div>
        </div>
        <div class="product-item-right">
          <div class="product-name">{{item.goods_name}}</div>
          <div class="price-box">
            <div class="discounts-price"><span>￥</span>{{item.goods_price}}</div>
            <div class="origin-price"></div>
          </div>
          <div class="calculate"
               v-show="isCollectPage">
            <div class="reduce"
                 @click.stop="handleReduce(item.cart_num,index)"
                 v-show="isCalculate">-</div>
            <div class="count">{{item.cart_num}}</div>
            <div class="add"
                 @click.stop="handleAdd(index)"
                 v-show="isCalculate">+</div>
          </div>
        </div>
        <div class="delete"
             v-show="isDetele"
             @click.stop="handleDelete(index, item.goods_id)">移除</div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'CommonProductList',
  data () {
    return {
      index: 0
    }
  },
  props: {
    isCalculate: {
      type: Boolean,
      default: true
    },
    list: {
      type: Array
    },
    isDetele: Boolean,
    isCollectPage: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleDetail (id) {
      this.$router.push({
        path: `/detail/${id}`
      })
    },
    handleAdd (index) {
      this.list[index].cart_num++
      this.$emit('changeNum', this.list)
    },
    handleReduce (num, index) {
      if (num === 1) return
      this.list[index].cart_num--
      this.$emit('changeNum', this.list)
    },
    handleDelete (index, id) {
      this.index = index
      const router = this.$route.fullPath
      if (router === '/shop') {
        this.delectShop(id)
      } else if (router === '/me/collect') {
        this.deleteCollect(id)
      }
    },
    deleteCollect (id) {
      this.$api.detail.collect({ goods_id: id })
        .then(this.addOrDeleteCollectSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    addOrDeleteCollectSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        this.$tip(res.msg, 1000)
        this.circulationDelete(this.index)
      }
    },
    delectShop (id) {
      this.$api.shop.delete({ goods_id: id })
        .then(this.delectShopSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    delectShopSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        this.$tip(res.msg, 1000)
        this.circulationDelete(this.index)
      }
    },
    circulationDelete (index) {
      for (let i = this.list.length - 1; i >= 0; i--) {
        if (i === index) {
          this.list.splice(index, 1)
        }
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.product-wrapper
  width 100%
  margin-bottom 20px

  .product-list
    width 100%
    padding-left 32px
    padding-bottom 32px
    padding-right 32px
    padding-top 32px
    background-color $common_bgc
    box-sizing border-box
    border-radius 24px

    .product-item
      width 100%
      padding-bottom 32px
      box-sizing border-box
      display flex
      position relative
      margin-bottom 20px

      &:nth-last-of-type(1)
        border none

      .product-item-left
        width 190px
        min-width 190px
        margin-right 50px

        .img-wrap
          background-color #ccc

      .product-item-right
        margin-right 70px

        .product-name
          font-size $address_name
          font-weight 400
          color $footer_bgc
          line-height 40px

        .price-box
          display flex
          align-items center
          height 74px

          .discounts-price
            font-size $address
            font-weight 400
            color $tab_active

            span
              font-size $small_fz
              margin-right 8px

        .calculate
          width 188px
          height 42px
          border 2px solid $calculate
          border-radius 8px
          display flex
          align-items center
          box-sizing border-box

          .reduce, .add
            min-width 48px
            font-size $shop_name
            color $calculate
            text-align center

          .add
            &:active
              color $tab_active

          .reduce
            &:active
              color $tab_active

          .count
            flex 1
            min-width 0
            line-height 42px
            ellipsis()
            text-align center
            border-left 2px solid $calculate
            border-right 2px solid $calculate
            font-size $address
            color $footer_bgc

      .delete
        position absolute
        bottom 32px
        right 0
        font-size $delete
        font-weight 400
        color $footer_bgc
        line-height 40px
</style>
